import _ from 'lodash'
interface IObserverOptions {
  /** 监听的目标元素选择器 */
  target: string | HTMLElement | Document
  /** 父级元素选择器，如果不传则默认使用document */
  /** 是否监听子树变化 */
  subtree?: boolean
  /** 是否监听节点属性变化 */
  attributes?: boolean
  /** 是否监听节点内容变化 */
  characterData?: boolean
  /** 是否监听子节点增删 */
  childList?: boolean
  /** 监听回调函数 */
  callback: MutationCallback
}

/**
 * 创建DOM变化监听器
 * @param options 监听配置项
 * @returns {MutationObserver} 返回监听器实例，可用于后续停止监听
 */
export const createDOMObserver = (options: IObserverOptions): MutationObserver | null => {
  try {
    let {
      target,
      subtree = true,
      attributes = false,
      characterData = false,
      childList = true,
      callback,
    } = options

    // 获取目标元素
    if (typeof target === 'string') {
      target = document.querySelector(target) as HTMLElement
    }
    if (!target) {
      console.error('找不到目标元素:', target)
      return null
    }
    // 创建观察者实例
    const observer = new MutationObserver(callback)
    // 配置观察选项
    const config = {
      subtree,
      attributes,
      characterData,
      childList,
    }

    // 开始观察
    logger.info('开始监听对话框DOM变化...')
    observer.observe(target, config)
    return observer
  } catch (error) {
    console.error('创建DOM监听器失败:', error)
    return null
  }
}
